<template>
  <div style="width:100%;height:100%;overflow:hidden;text-align:center">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="position:relative"></div>
      <div class="swiper-slide" v-for="media in medias">
        <video :data-src="media.src" controls="controls"
               v-if="media.src.toLowerCase().indexOf('mp4')!=-1" class="swiper-lazy">
          您的浏览器不支持 video 标签。
        </video>
        <img :data-src="media.src" style="max-width:100%;max-height:100%"
             v-if="media.src.toLowerCase().indexOf('jpg')!=-1"
             class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper/dist/js/swiper'
  import Stage from '../lib/hilo/view/Stage'
  import Ticker from '../lib/hilo/util/Ticker'
  import Text from '../lib/hilo/view/Text'
  import Hilo from '../lib/hilo/core/Hilo'
  import Bitmap from '../lib/hilo/view/Bitmap'
  import Tween from '../lib/hilo/tween/Tween'
  import LoadQueue from '../lib/hilo/loader/LoadQueue'

  var stage

  export default {
    data() {
      return {
        medias: [{
//          src: 'https://zoro.site/media/20170805.mp4?width=400'
//        }, {
          src: 'https://zoro.site/media/20170909.JPG?width=400'
        }, {
//          src: 'https://zoro.site/media/201709240.mp4?width=400'
//        }, {
          src: 'https://zoro.site/media/201709241.JPG?width=400'
        }, {
          src: 'https://zoro.site/media/201709242.JPG?width=400'
        }, {
          src: 'https://zoro.site/media/201709243.JPG?width=400'
        }, {
//          src: 'https://zoro.site/media/201709244.mp4?width=400'
//        }, {
          src: 'https://zoro.site/media/201709281.jpg?width=400'
        }, {
          src: 'https://zoro.site/media/201709282.jpg?width=400'
        }, {
          src: 'https://zoro.site/media/201709283.jpg?width=400'
        }, {
          src: 'https://zoro.site/media/201709284.jpg?width=400'
        }, {
          src: 'https://zoro.site/media/201709285.jpg?width=400'
//        }, {
//          src: 'https://zoro.site/media/201709286.mp4?width=400'
        }]
      }
    },
    mounted() {
      this.$store.commit('set_title', '')

      this.$nextTick(() => {
        var swiper = new Swiper(this.$el, {
          paginationClickable: true,
          direction: 'vertical',
          preloadImages: false,// Disable preloading of all images
          lazyLoading: true,// Enable lazy loading

//        effect: 'fade',

//        effect: 'cube',
//        grabCursor: true,
//        cube: {
//          shadow: true,
//          slideShadows: true,
//          shadowOffset: 20,
//          shadowScale: 0.94
//        },

          effect: 'flip',
        });

        stage = new Stage({
          renderType: 'canvas',
          container: this.$el.querySelectorAll('.swiper-slide')[0],
          width: window.outerWidth,
          height: window.outerHeight
        });

        var ticker = new Ticker(60);
        ticker.addTick(stage);
        ticker.addTick(Tween)
        ticker.start();
        this.addBitmap(0)

//          var text = new Text({
//            text: 'text'
//          }).addTo(stage);

//          stage.enableDOMEvent(Hilo.event.POINTER_START, true);
//          text.on(Hilo.event.POINTER_START, function (e) {
//            console.log(e.eventTarget, e.stageX, e.stageY);
//          });
      })
    },
    methods: {
      addBitmap(index) {
        if (index >= this.medias.length) {
          return
        }
        var queue = new LoadQueue();
        queue.add([{
          id: 'img0', src: this.medias[index].src
        }]);
        queue.on('complete', () => {
          var bitmap = new Bitmap({
            image: queue.get('img0').content
          })
          var width = bitmap.width
          var height = bitmap.height
          var margin = Math.max(width, height)
          bitmap.width = 0
          bitmap.height = 0
          bitmap.x = width / 2 + Math.random() * (stage.width - margin)
          bitmap.y = height / 2 + Math.random() * (stage.height - margin)
          bitmap.rotation = Math.random() * 360
          bitmap.addTo(stage)

          Tween.to(bitmap, {
            rotation: Math.random() * 360,
            width: width,
            height: height,
            pivotX: width / 2,
            pivotY: height / 2
          }, {
            duration: Math.random() * 5000 + 5000,
//            delay: Math.random() * 10000,
//              loop: true,
            onComplete: () => {
              this.addBitmap(index + 1)
            }
          })
        });
        queue.start();
      }
    }
  }
</script>

<style>
  @import "~swiper/dist/css/swiper.css";

  .swiper-slide {
    background: #000;
  }

  .swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
  }

  .swiper-slide canvas {
    left: 0
  }
</style>
